<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs scroll-container1" @scroll="pageScroll1">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('l_fanhui')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{$t('l_sousuo')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;"></div>
							</div>
							<div class="searchbox">
								<div class="inputbox">
									<el-input v-model="value" :placeholder="$t('l_sousuoyouxi')" />
									<i aria-label="图标: search" tabindex="-1">
										<svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em"
											fill="currentColor" aria-hidden="true" focusable="false" class="">
											<path
												d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
											</path>
										</svg>
									</i>
								</div>
								<div class="searchbtn" @click="searchfc">{{$t('l_sousuo')}}</div>
							</div>
							<div class="pc_list">
								<div class="pc_listtop">
									<div class="pc_tabsitem" :class="tab == 0 ? 'active':''" @click="tab = 0">
										<img src="../../assets/images/index/icon.png" alt="">
										<div>{{$t('l_sousuojieguo')}}</div>
									</div>
									<!-- <div class="pc_tabsitem" :class="tab == 1 ? 'active':''" @click="tab = 1">
										<img src="../../assets/images/index/icon1.png" alt="">
										<div>全部热门</div>
									</div>
									<div class="pc_tabsitem" :class="tab == 2 ? 'active':''" @click="tab = 2">
										<img src="../../assets/images/index/icon2.png" alt="">
										<div>最近游戏</div>
									</div>
									<div class="pc_tabsitem" :class="tab == 3 ? 'active':''" @click="tab = 3">
										<img src="../../assets/images/index/icon3.png" alt="">
										<div>我的收藏</div>
									</div> -->
								</div>
								<div class="pc_gamesbox">
									<div class="pc_gameslist">
										<div class="lists" v-if="gameList.length > 0">
											<div class="items" v-for="(vo,key) in gameList" :key="key"
												@click="goGame1(vo)">
												<div class="box">
													<img class="pic" :src="vo.imageUrl" />
													<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<div class="typeone two"
														v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<div class="typeone three"
														v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<div class="typeone four"
														v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<div class="typeone five"
														v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<div class="typeone five"
														v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 12px;">{{vo.platType}}</span>
														<span>{{vo.gameName}}</span>
													</div>
													<!-- <div class="tuijian">
														推荐
													</div>
													<img class="lovebtn" src="/icons/index/no_love.png" /> -->
												</div>
											</div>
										</div>
										<div v-else class="nodataTow">
											<img src="../../assets/images/yh/nodata.png" alt="">
											<div>{{$t('l_wusousuo')}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="pc_goTop" @click="gotop1" v-if="scrollTop1>100">
						<i><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_fhdb--sprite"></use>
							</svg></i>
						<span>{{$t('l_zhiding')}}</span>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_sousuo')"></navHeader>
				<div class="h5style">
					<div class="scroll-container" @scroll="pageScroll">
						<div class="searchbox">
							<div class="inputbox">
								<el-input v-model="value" :placeholder="$t('l_sousuoyouxi')" />
								<i aria-label="图标: search" tabindex="-1" @click="searchfc">
									<svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em"
										fill="currentColor" aria-hidden="true" focusable="false" class="">
										<path
											d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
										</path>
									</svg>
								</i>
							</div>
						</div>
						<div class="pc_list">
							<div class="pc_listtop">
								<div class="pc_tabsitem" :class="tab == 0 ? 'active':''" @click="tab = 0">
									<img src="../../assets/images/index/icon.png" alt="">
									<div>{{$t('l_sousuojieguo')}}</div>
								</div>
								<!-- <div class="pc_tabsitem" :class="tab == 1 ? 'active':''" @click="tab = 1">
									<img src="../../assets/images/index/icon1.png" alt="">
									<div>全部热门</div>
								</div>
								<div class="pc_tabsitem" :class="tab == 2 ? 'active':''" @click="tab = 2">
									<img src="../../assets/images/index/icon2.png" alt="">
									<div>最近游戏</div>
								</div>
								<div class="pc_tabsitem" :class="tab == 3 ? 'active':''" @click="tab = 3">
									<img src="../../assets/images/index/icon3.png" alt="">
									<div>我的收藏</div>
								</div> -->
							</div>
							<div class="gamesbox">
								<div class="gameslist">
									<div class="lists" v-if="gameList.length > 0">
										<div class="items" v-for="(vo,key) in gameList" :key="key" @click="goGame(vo)">
											<div class="box">
												<img class="pic" :src="vo.imageUrl" />
												<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone two" v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone three" v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone four" v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone five" v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<div class="typeone five" v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
													<!-- <img class="cspic"
														:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
													<span style="font-size: .16rem;">{{vo.platType}}</span>
													<span>{{vo.gameName}}</span>
												</div>
												<!-- <div class="tuijian">
													推荐
												</div>
												<img class="lovebtn" src="/icons/index/no_love.png" /> -->
											</div>
										</div>
									</div>
									<div v-else class="nodata">
										<img src="../../assets/images/yh/nodata.png" alt="">
										<div>{{$t('l_wusousuo')}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<gameWebview ref="gameWebview"></gameWebview>
				<goTop v-if="scrollTop>100"></goTop>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import goTop from '../../components/goTop.vue'
	import gameWebview from '../../components/gameWebview.vue'
	export default {
		components: {
			gameWebview,
			navHeader,
			PcHedaer,
			PcDrawer,
			goTop
		},
		data() {
			return {
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					// {
					// 	id: -2,
					// 	name: '最 近',
					// 	key: 'icon_game_menu_active_100',
					// },
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,

				value: '',
				tab: 0,
				scrollTop: 0,
				scrollTop1: 0,
				gamePage: 1,
				gameList: []
			}
		},
		methods: {
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			pageScroll(e) {
				this.scrollTop = e.target.scrollTop
			},
			gotop1() {
				document.querySelector('.scroll-container1').scrollTop = 0
			},
			pageScroll1(e) {
				this.scrollTop1 = e.target.scrollTop
			},
			searchfc() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameList({
					page: this.gamePage,
					gameName: this.value
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.gameList = [...this.gameList, ...res.data];
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			goGame(item) {
				let ingress = this.$F.isMobile() ? 'device2' : 'device1';
				if (item.ingress) {
					ingress = item.ingress
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameOpenGame({
					platType: item.platType,
					gameType: item.gameType,
					gameCode: item.gameCode,
					ingress: ingress,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$refs.gameWebview.show(res.data)
						this.full()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			full() {
				// if (document.body.requestFullscreen) {
				//     document.body.requestFullscreen();
				// } else if (document.body.mozRequestFullScreen) {
				//     document.body.mozRequestFullScreen();
				// } else if (document.body.webkitRequestFullscreen) {
				//     document.body.webkitRequestFullscreen();
				// } else if (document.body.msRequestFullscreen) {
				//     document.body.msRequestFullscreen();
				// }
			},
			goGame1(item) {
				let ingress = this.$F.isMobile() ? 'device2' : 'device1';
				if (item.ingress) {
					ingress = item.ingress
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.gameOpenGame({
					platType: item.platType,
					gameType: item.gameType,
					gameCode: item.gameCode,
					ingress: ingress,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						window.open(res.data)
					} else {
						this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.pc_conboxs {
		.searchbox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 72px;
			padding: 16px;
			background-color: var(--theme-top-nav-bg);;
			border-radius: 7px;
			margin-top: 16px;
		}

		.inputbox {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid var(--theme-color-line);
			height: 100%;
			border-radius: 50px;

			/deep/ .el-input__inner {
				border: 0 !important;
				border-radius: 50px !important;
				height: 38px !important;
				padding-left: 12px !important;
			}

			i {
				color: var(--theme-color-line);;
				font-size: 20px;
				margin-right: 15px;
			}
		}

		.searchbtn {
			background-color: var(--theme-primary-color);
			color: var(--theme-primary-font-color);
			width: 96px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			border-radius: 7px;
			margin-left: 16px;
			cursor: pointer;
		}

		.pc_list {
			width: 100%;
			height: auto;
			border-radius: 7px;
			// background-color: var(--theme-top-nav-bg);;
			margin-top: 16px;
			padding-top: 10px;
		}

		.pc_listtop {
			width: 100%;
			height: 41px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 16px;
			border-bottom: 1px solid var(--theme-color-line);
		}

		.pc_tabsitem {
			width: 85px;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 2px solid transparent;
			color: var(--theme-text-color);
			font-size: 14px;
			margin-right: 48px;
			cursor: pointer;

			img {
				width: 20px;
				height: 26px;
				margin-right: 5px;
			}

			div {
				flex: 1;
				text-align: center;
			}
		}

		.pc_tabsitem.active {
			color:var(--theme-primary-color);
			border-bottom: 2px solid  var(--theme-primary-color);
		}

		.pc_gamesbox {
			padding: 0 15px;

			.pc_gameslist {
				padding: 23px 0;

				.lists {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					padding: 0 7px;

					.items {
						margin: 9px 0;
						width: 16.66667%;

						.box {
							height: 178px;
							width: 133px;
							border-radius: 10px;
							margin: 0 auto;
							overflow: hidden;
							position: relative;

							.pic {
								width: 100%;
								height: 100%;
							}

							.lovebtn {
								align-items: center;
								cursor: pointer;
								display: -ms-flexbox;
								display: flex;
								font-size: 26px;
								height: 26px;
								justify-content: center;
								line-height: 0;
								position: absolute;
								right: 4px;
								top: 4px;
								width: 26px;
								z-index: 9;
							}

							.typeone {
								position: absolute;
								z-index: 1;
								bottom: 0;
								width: 100%;
								display: flex;
								align-items: center;
								text-align: center;
								flex-direction: column-reverse;
								pointer-events: none;
								background: linear-gradient(#5b5b70, #201e1f);
								padding-bottom: 5px;

								span {
									font-family: MicrosoftYaHei;
									font-size: 22px;
									line-height: 1.1;
									line-height: 1.3;
									max-height: 110px;
									padding: 0 5px;
									max-width: 100%;
									overflow: hidden;
									text-align: center;
									text-overflow: ellipsis;
									text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
									color: var(--theme-text-color-task-btn);
									/*超出部分隐藏*/
									overflow: hidden;
									/*强制在一行*/
									white-space: nowrap;
									/*文本超出部分省略*/
									text-overflow: ellipsis;
								}

								.cspic {
									display: inline-block;
									height: 30px;
									width: 30px;
								}
							}

							.tuijian {
								font-size: 12px;
								font-weight: 700;
								line-height: 1;
								background-color: var(--theme-secondary-color-error);
								align-items: center;
								color: var(--theme-text-color-activities-text);
								display: flex;
								padding: 1.5px 4px;
								position: absolute;
								z-index: 1;
								top: 0;
								left: 0;
								border-top-right-radius: 5px;
								border-bottom-right-radius: 5px;
							}
						}
					}
				}
			}
		}

		.pc_goTop {
			width: 66px;
			position: fixed;
			bottom: 55px;
			z-index: 100;
			right: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: var(--theme-main-bg-color);
			border: 1px solid var(--theme-color-line);
			border-radius: 6px;
			padding: 7px 0;
			cursor: pointer;

			i {
				display: flex;
				align-items: center;
				display: block;
				width: 22px;
				height: 22px;
				line-height: 15px;
				font-size: 22px;
				text-align: center;
				background-color: var(--theme-primary-color);
				border-radius: 50%;
				color: var(--theme-primary-font-color);
				margin: 7px auto 0;
			}

			span {
				word-wrap: break-word;
				color: var(--theme-text-color-lighten);
				font-size: 12px;
				display: block;
				text-align: center;
			}
		}
	}

	.h5style {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.scroll-container {
			flex: 1;
			width: unset;
			padding: 0 0.2rem;
			overflow-y: overlay;
			margin-right: -0.1rem;
		}

		.searchbox {
			width: 100%;
			padding: 0.2rem;
		}

		.inputbox {
			// border-color: var(--theme-color-line);
			border: 1px solid var(--theme-color-line);
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 0.25rem !important;

			/deep/ .el-input__inner {
				border: 0 !important;
				border-radius: 0.25rem !important;
				height: 0.5rem !important;
				font-size: .22rem !important;
				padding: 0 0.2rem !important;
			}

			i {
				color: var(--theme-color-line);
				font-size: .3rem;
				margin-right: .15rem;
			}
		}

		.pc_list {
			width: 100%;
			height: auto;
			margin: 0 0 0.6rem;
		}

		.pc_listtop {
			width: 100%;
			height: 0.7rem;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 0.2rem;
			border-bottom: 1px solid var(--theme-color-line);
		}

		.pc_tabsitem {
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 2px solid transparent;
			color: var(--theme-text-color);
			font-size: .24rem;
			margin-right: .3rem;
			cursor: pointer;

			img {
				width: 0.28rem;
				height: 0.38rem;
				margin-right: .06rem;
			}

			div {
				flex: 1;
				text-align: center;
			}
		}

		.pc_tabsitem.active {
			color:  var(--theme-primary-color);
			border-bottom: 2px solid  var(--theme-primary-color);
		}

		.gamesbox {
			padding: 0.3rem 0;

			.gameslist {
				margin-bottom: .3rem;

				.titles {
					padding: 0 0 .3rem;
					display: flex;

					img {
						display: block;
						width: 0.52rem;
					}

					span {
						align-items: center;
						color: var(--theme-text-color-darken);
						display: -ms-flexbox;
						display: flex;
						font-size: .3rem;
					}
				}

				.lists {
					display: flex;
					flex-wrap: wrap;

					.items {
						margin: var(--cardRowSpacing) var(--cardColSpacing);
						width: 33.33333%;
						margin-bottom: 15px;

						.box {
							height: 2.792rem;
							width: 2.1rem;
							border-radius: 0.2rem;
							margin: 0 auto;
							overflow: hidden;
							position: relative;

							.pic {
								width: 100%;
								height: 100%;
							}

							.lovebtn {
								align-items: center;
								cursor: pointer;
								display: -ms-flexbox;
								display: flex;
								font-size: .4rem;
								height: 0.4rem;
								justify-content: center;
								line-height: 0;
								position: absolute;
								right: 0.06rem;
								top: 0.06rem;
								width: 0.4rem;
								z-index: 9;
							}

							.typeone {
								position: absolute;
								z-index: 1;
								bottom: 0;
								width: 100%;
								display: flex;
								align-items: center;
								text-align: center;
								flex-direction: column-reverse;
								pointer-events: none;
								background: linear-gradient(#5b5b70, #201e1f);
								padding-bottom: 5px;

								span {
									font-family: MicrosoftYaHei;
									font-size: .32rem;
									line-height: 1.1;
									line-height: 1.3;
									padding: 0 5px;
									max-height: 2.2rem;
									max-width: 100%;
									overflow: hidden;
									text-align: center;
									text-overflow: ellipsis;
									text-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, .3);
									color: var(--theme-text-color-task-btn);
									/*超出部分隐藏*/
									overflow: hidden;
									/*强制在一行*/
									white-space: nowrap;
									/*文本超出部分省略*/
									text-overflow: ellipsis;
								}

								.cspic {
									display: inline-block;
									height: 0.46rem;
									width: 0.46rem;
								}
							}

							.tuijian {
								font-size: .2rem;
								font-weight: 700;
								line-height: 1;
								background-color: var(--theme-secondary-color-error);
								align-items: center;
								color: var(--theme-text-color-activities-text);
								display: flex;
								padding: .03rem .16rem;
								position: absolute;
								z-index: 1;
								top: 0;
								left: 0;
								border-top-right-radius: .1rem;
								border-bottom-right-radius: .1rem;
							}
						}
					}
				}
			}
		}
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.nodataTow {
		margin: 0 auto;
		text-align: center;
	}

	.nodataTow img {
		height: 150px;
		margin-bottom: 10px;
		margin: 0 auto;
		width: 170px;
	}

	.nodataTow div {
		color: var(--theme-alt-neutral-2);
		font-size: 16px;
	}

	.typeone.one {
		background: linear-gradient(rgb(199, 91, 247), rgb(172, 26, 239));
	}

	.typeone.two {
		background: linear-gradient(rgb(250, 146, 61), rgb(246, 105, 0));
	}

	.typeone.three {
		background: linear-gradient(rgb(156, 85, 49), rgb(156, 93, 67));
	}

	.typeone.four {
		background: linear-gradient(rgb(192, 20, 59), rgb(239, 8, 77));
	}

	.typeone.five {
		background: linear-gradient(rgb(120, 93, 86), rgb(171, 140, 121));
	}

	.typeone.six {
		background: linear-gradient(rgb(21, 137, 116), rgb(22, 213, 164));
	}
</style>